<template>
  <div class="main">
    <!-- 动态组件 -->
    <component :is="currentComponent"></component>
    <Toolbar @onChangeFragement="onChangeFragement"></Toolbar>
  </div>
</template>

<script>
import Toolbar from '@/pages/toolbar/Toolbar'
export default {
  name: 'Main',
  data () {
    return {
      city: '',
      hotCities: [],
      iconList: [],
      recommendList: [],
      weekendList: [],
      swiperList: [],
      currentComponent: 'Home'
    }
  },
  components: {
    Toolbar,
    // 异步组件引入方式
    'Home': () => import('@/pages/home/Home'),
    'Discover': () => import('@/pages/discover/Discover')
  },
  methods: {
    // 组件切换
    onChangeFragement (params) {
      console.log(params)
      this.currentComponent = params
    }
  }
}
</script>

<style lang="stylus" scoped>
.main
  position relative
  height 100%
  width 100%
  display flex
  flex-direction column
  overflow hidden
  box-sizing border-box
  padding-bottom 83px
</style>
